<div class="bs-docs-section">
  <h1 id="scrollbars" class="page-header">Scrollbars</h1>

  <h3>Usage</h3>
  <p>Attach the <code>scrollable</code> class to any container which has its overflow property set.</p>
  <div class="bs-callout bs-callout-warning">
    <h4>Availability</h4>
    <p>Available only in Chrome and Safari.</p>
  </div>
  <div class="bs-example" data-example-id="default-scrollbars">
    <div class="scrollable">
      <h4>Overflowing text to show optional scrollbar</h4>
      <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    </div>
  </div>
 {% highlight html %}
<div class="scrollable">
  <h4>Overflowing text to show optional scrollbar</h4>
  ...
</div>
<div class="well well-sm">...</div>
 {% endhighlight %}
</div>
